<template>
  <div class="boxs">
    <div class="boxLeft">
      <div class="total">
        <p style="margin-top: 8px">
          <img
            src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32ed6a7619934144882d841761b63d3c~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp"
            alt=""
          />
        </p>

        <el-tooltip
          class="item"
          effect="dark"
          :content="integrals"
          placement="top"
        >
          <p class="integer">{{ integral }}</p>
        </el-tooltip>
      </div>
      <div class="box">
        <!-- 
    {{ prize.title }} -->

        <div class="top">
          <ul class="topDraw">
            <li
              v-for="(item, index) in list"
              :key="index"
              :class="activeIndex == item.no ? 'aa' : 'topLis'"
            >
              <div>
                <p>
                  <img v-lazy="item.imgs" alt="" />
                </p>
                <p class="span">
                  {{ item.title }}
                </p>
              </div>
            </li>
          </ul>
        </div>
        <div class="bottom">
          <el-button class="left" @click="lefts" :disabled="isDisAbled">
            <div>
              <p class="p1">单抽</p>
              <p class="p2">
                <img
                  src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32ed6a7619934144882d841761b63d3c~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp"
                  alt=""
                />
              </p>
              <p class="p3">200</p>
            </div>
          </el-button>
          <el-button class="right" @click="rights" :disabled="isDisAbled1">
            <div>
              <p class="p1">十连抽</p>
              <p class="p2">
                <img
                  src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32ed6a7619934144882d841761b63d3c~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp"
                  alt=""
                />
              </p>
              <p class="p3">2000</p>
            </div>
          </el-button>
        </div>

        <!-- 弹出框 -->
        <!-- 单抽 -->
        <el-dialog
          :title="
            prize.title == '随机矿石'
              ? `恭喜抽中${counts}矿石`
              : `恭喜抽中${prize.title}`
          "
          :visible.sync="centerDialogVisible"
          width="400px"
          center
          class="dialog"
          v-if="type == 1"
        >
          <!-- <span>恭喜抽中奖品</span>
       -->
          <div class="divImgs">
            <img :src="prize.imgs" alt="" style="width: 88px; height: 88px" />
          </div>
          <p style="text-align: center" v-show="prize.title == '随机矿石'">
            本次抽中的矿石已累加到你的当前矿石数中
          </p>
          <!-- 恭喜你抽中了一个bug，请保留好，敬请期待妙用 -->
          <p style="text-align: center" v-show="prize.title != '随机矿石'">
            恭喜你抽中了一个{{ prize.title }}，请保留好，敬请期待妙用
          </p>
          <span slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              @click="centerDialogVisible = false"
              style="width: 50%"
              >收下奖励</el-button
            >
          </span>
        </el-dialog>

        <!-- 十连抽 -->
        <el-dialog
          title="
       恭喜抽中以下奖品
      "
          :visible.sync="centerDialogVisible"
          width="400px"
          center
          class="dialog"
          v-else
        >
          <!-- <span>恭喜抽中奖品</span>
       -->
          <div class="divImga">
            <div v-for="(item, index) in list1">
              <p>
                <img
                  :src="item.imgs"
                  alt=""
                  style="width: 44px; height: 44px"
                />
              </p>
            </div>
          </div>

          <span slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              @click="centerDialogVisible = false"
              style="width: 50%"
              >收下奖励</el-button
            >
          </span>
        </el-dialog>
        <!-- 钻石不足 -->
        <el-dialog
          title="
       友情提示
      "
          :visible.sync="centerDialogVisible1"
          width="400px"
          center
          class="dialog"
        >
          <!-- <span>恭喜抽中奖品</span>
       -->
          <div class="divImga">
            <ul class="nulls">
              <li style="text-align: center" class="li1">当前矿石不足</li>
              <li style="text-align: center" class="li2">
                多多访问掘金赚取矿石吧
              </li>
            </ul>
          </div>

          <span slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              @click="centerDialogVisible1 = false"
              style="width: 50%"
              >我知道了</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>

    <div class="boxRight" v-show="lists">
      <div class="top">礼品列表</div>
      <ul class="bottom">
        <el-table
          :data="lists"
          border
          style="width: 100%"
          :row-style="{ height: '40px' }"
        >
          <el-table-column
            prop="title"
            label="奖品名称"
            align="center"
            height="20"
          >
          </el-table-column>
          <el-table-column label="奖品图片" align="center">
            <template slot-scope="scope">
              <img
                :src="scope.row.imgs"
                alt=""
                style="width: 40px; height: 40px"
              />
            </template>
          </el-table-column>
          <el-table-column prop="COUNT" label="奖品数量" align="center">
          </el-table-column>
        </el-table>
      </ul>
    </div>
  </div>
</template>

<script>
import { luckyDraw } from "@/api/index";
import deepmerge from "yll_deepmerge";
// import {hebing} from "@/mixins/hebing"
// console.log(hebing(8888),777777);
export default {
  data() {
    return {
      list: [],
      list1: [],
      list2: [],    //礼品列表
      // lists: [],
      integral: 122194, //积分
      activeIndex: -1,
      counts: 0,
      centerDialogVisible: false,
      centerDialogVisible1: false,
      prize: {}, //奖品
      isDisAbled: false,
      isDisAbled1: false,
      ids: [],
      type: 1,
    };
  },
  mounted() {
    luckyDraw().then(({ data }) => {
      this.list = data;
    });
  },
  computed: {
    integrals() {
      if (this.integral < 10000) {
        return `${this.integral}`;
      } else if (this.integral >= 10000 && this.integral < 99999999) {
        return `${this.integral / 10000}万`;
      } else if (this.integral > 99999999) {
        return `${this.integral / 100000000}亿`;
      }
    },
    lists() {
      if (this.list2.length > 0) {
        let newdata = [];
        for (let k in this.list2) {
          newdata.push({
            ...this.list2[k],
            KEY: this.list2[k].no + this.list2[k].title,
          });
        }
        //
        let result = [];
        let map = {};
        for (let k = 0; k < newdata.length; k++) {
          if (!map[newdata[k].KEY]) {
            result.push({
              ...newdata[k],
              COUNT: 1,
            });
            map[newdata[k].KEY] = newdata[k];
          } else {
            for (let j = 0; j < result.length; j++) {
              if (result[j].KEY == newdata[k].KEY) {
                result[j].COUNT++;
                break;
              }
            }
          }
        }
        return result;
      }
    },
  },
  methods: {
    //   单抽
    lefts() {
      this.type = 1;
      if (this.integral >= 200) {
        this.integral -= 200;
        this.isDisAbled = true;
        this.isDisAbled1 = true;
        setTimeout(() => {
          this.isDisAbled = false;
        }, 2500);
        for (let i = 0; i < 10; i++) {
          setTimeout(() => {
            let id = Math.ceil(Math.random() * 9);
            this.activeIndex = id;
            // this.ids.push(id);
            if (i == 9) {
              //   this.ids.forEach((r) => {
              if (id == 1) {
                this.prize = this.list.find((r) => r.no == id);
                let counts = Math.ceil(Math.random() * 1000);
                // console.log(counts, this.prize);
                this.counts = counts;
                this.integral += counts;
                this.activeIndex = -1;
                this.list2.push(this.list.find((item) => item.no == id));
                //   this.list2.push(this.list.find((item) => item.no == r));
              } else {
                this.activeIndex = -1;
                this.prize = this.list.find((r) => r.no == id);
                this.list2.push(this.list.find((item) => item.no == id));
                //   this.list2.push(this.list.find((item) => item.no == r));
                // console.log(this.prize);
              }
              //   });
              this.centerDialogVisible = true;

              this.isDisAbled1 = false;
            }
          }, 100 * i);
        }
      } else if (this.integral < 200) {
        this.centerDialogVisible1 = true;
      }
    },
    // 十连抽
    rights() {
      this.type = 2;
      this.list1 = [];
      this.ids = [];
      if (this.integral >= 2000) {
        this.integral -= 2000;
        this.isDisAbled1 = true;
        this.isDisAbled = true;
        setTimeout(() => {
          this.isDisAbled1 = false;
        }, 2500);

        for (let i = 0; i < 10; i++) {
          setTimeout(() => {
            let id = Math.ceil(Math.random() * 9);
            this.activeIndex = id;
            this.ids.push(id);
            // console.log(this.ids);
            if (i == 9) {
              this.ids.forEach((r) => {
                if (r == 1) {
                  console.log(r, "我是r");
                  let counts = Math.ceil(Math.random() * 1000);
                  console.log(counts);
                  //    this.counts = counts;
                  this.integral += counts;
                  this.list1.push(this.list.find((item) => item.no == r));
                  this.list2.push(this.list.find((item) => item.no == r));
                  // this.lists = hebing(this.list2);
                } else {
                  this.list1.push(this.list.find((item) => item.no == r));
                  this.list2.push(this.list.find((item) => item.no == r));
                  // this.lists = hebing(this.list2);
                }
              });
              this.activeIndex = -1;
              this.isDisAbled = false;
              this.centerDialogVisible = true;
            }
          }, 100 * i);
        }
      } else if (this.integral < 2000) {
        this.centerDialogVisible1 = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.boxs {
  display: flex;
  .boxLeft {
    .total {
      width: 100px;
      height: 36px;
      border-radius: 25px;
      font-size: 20px;
      color: #faf1be;
      background-color: rgba(30, 128, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      .integer {
        // border: 1px solid red;
        overflow: hidden; //（文字长度超出限定宽度，则隐藏超出的内容）
        white-space: nowrap; //（设置文字在一行显示，不能换行）
        text-overflow: ellipsis; //（规定当文本溢出时，显示省略符号来代表被修剪的文本）
      }
      img {
        width: 22px;
        height: 22px;
      }
    }
    .box {
      // border: 1px solid red;
      width: 473px;
      height: 502px;
      background: #fadd95;
      box-shadow: inset 0 0 16px #ff9a2e;
      border-radius: 12px;
      .top {
        // border: 1px solid red;
        width: 100%;
        height: 398px;
        padding: 24px;
        .topDraw {
          //   border: 1px solid red;
          height: 348px;
          padding: 16px;
          background: #e37815;
          border-radius: 8px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-content: space-between;
          .topLis {
            width: 125.664px;
            height: 99.992px;
            // border-bottom: 1px solid red;
            background: white;
            border-radius: 5px;
            padding: 16px 0;

            div {
              width: 100%;
              //   border: 1px solid black;
              height: calc(99.992px - 32px);
              display: flex;
              flex-direction: column;
              //    justify-content: center;
              align-items: center;
              img {
                width: 40px;
                height: 40px;
              }
              .span {
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
                color: #d25f00;
                max-width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
      .bottom {
        // border: 1px solid yellow;
        height: 104px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 24px 32px;
        .el-button {
          //   flex-direction: row;
          background: linear-gradient(180deg, #ffb46f 15.1%, #ef7d13);
          box-shadow: 0 8px 0 #d25f00;
          width: 204px;
          height: 64px;
          border: none;
          border-radius: 16px;
          font-size: 20px;
          div {
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .p1 {
            // width: 40px;
            // height: 32px;
            color: white;
          }
          .p2 {
            margin: 5px 5px 0 5px;
            img {
              width: 24px;
              height: 24px;
            }
          }
          .p3 {
            color: #faf1be;
          }
        }
      }
      .dialog {
        .divImga {
          // border:1px solid red;
          display: flex;
          align-items: center;
          //   justify-content: center;
          flex-wrap: wrap;
          .nulls {
            //   border: 1px solid #ccc;
            width: 100%;
            .li1 {
              font-size: 20px;
              color: #d25f00;
              margin-bottom: 15px;
            }
          }
          div {
            border: 1px solid #ccc;
            margin: 0 10px 10px 0;
          }
          img {
            //  border:1px solid red;
          }
        }
        .divImgs {
          // border:1px solid red;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            //  border:1px solid red;
          }
        }
      }
    }
  }
  .boxRight {
    margin-left: 50px;
    flex: 1;
    height: 100vh;
    // border: 1px solid #ccc;
    .top {
      height: 46px;
      font-size: 20px;
      color: #d25f00;
      line-height: 46px;
      //   margin-left: 20px;
    }
    .bottom {
      height: 502px;
      //   border: 1px solid red;
    }
  }
}

.aa {
  width: 125.664px;
  height: 99.992px;
  //   border-bottom: 1px solid red;
  background: #f9d891;
  border-radius: 5px;
  padding: 16px 0;

  div {
    width: 100%;
    //   border: 1px solid black;
    height: calc(99.992px - 32px);
    display: flex;
    flex-direction: column;
    //    justify-content: center;
    align-items: center;
    img {
      width: 40px;
      height: 40px;
    }
    .span {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #d25f00;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
::v-deep .el-dialog__title {
  font-size: 20px;
  color: #d25f00;

  font-weight: 500;
}
::v-deep .el-table__row {
  height: 50px;
  padding: 0;
}
</style>
